<template>
  <div class="property">
    <div class="item_name" :title="`${property.name}(${property.description})`">{{ property.name }}</div>
    <div class="readonly_flag" :class="readonly ? 'readonly_true' : ''">
      <ESColor :color="newColorRef" @ok="okHandler"></ESColor>
      <!-- <ColorProp  v-model="colorRef">
            </ColorProp> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { onBeforeUnmount, computed } from "vue";
import { PropertyCompCallbackFuncParamsType } from "./base";
import { ESColor } from "earthsdk-ui"
const props = withDefaults(defineProps<{
  property: any;
}>(), {
});
const emits = defineEmits<{
  (e: 'callback', params: PropertyCompCallbackFuncParamsType): void;
}>();

type ColorType = [number, number, number, number]

const { property } = props
const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount);
const colorRef = readonly ? toReadonlyVueRef<ColorType | undefined>(disposer, property.reactVar, s => s && ([...s] as ColorType)) : toVR<ColorType | undefined>(disposer, property.reactVar, s => s && ([...s] as ColorType))
const newColorRef = computed(() => {
  if (colorRef.value === undefined) {
    return {
      r: 255, g: 255, b: 255, a: 1
    }
  } else {
    return {
      r: colorRef.value[0] * 255,
      g: colorRef.value[1] * 255,
      b: colorRef.value[2] * 255,
      a: colorRef.value[3]
    }
  }
})
const okHandler = (rgba: { r: number, g: number, b: number, a: number }) => {
  const rgbaArr: ColorType = [rgba.r / 255, rgba.g / 255, rgba.b / 255, rgba.a]
  colorRef.value = rgbaArr
}
</script>
<style scoped>
.property {
  width: 100%;
  display: flex;
}

.item_name {
  width: 70px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  color: rgba(230, 230, 230, 1);
  font-size: 14px;
}

.readonly_flag {
  flex: 1;
}

.readonly_true {
  cursor: not-allowed;
  cursor: no-drop;
}
</style>
